<template>
  <div>
    <main class="mainContainer">
      <van-loading text-color="#ffc456" color="#ffc456" vertical v-if="loading"
        >加载中...</van-loading
      >
      <lazy-component>
        <div v-for="item in jobs" :key="item.id" @click="handleClick(item)">
          <van-row>
            <van-col span="7">
              <van-image :src="item.image" height="6rem" radius="10" />
            </van-col>
            <van-col span="16" offset="1">
              <div class="style">
                <div class="title">
                  <van-text-ellipsis rows="2" :content="item.title" />
                </div>

                <van-row justify="space-between">
                  <div class="num">浏览量{{ item.visits }}</div>
                  <div class="release_time">{{ item.date }}</div>
                </van-row>
              </div>
            </van-col>
          </van-row>
          <van-divider :hairline="false" />
        </div>
      </lazy-component>
      <van-empty description="暂无咨询" v-if="!loading && !jobs.length" />
    </main>
  </div>
</template>

<script setup>
import { showToast } from 'vant' // 导入 Vant 库中的提示组件函数
import { ref } from 'vue' // 导入 Vue 的 ref 函数，用于创建响应式数据
import { baseURL, consultingIndex } from '../api' // 导入自定义的 API 函数，包括基本 URL 和获取咨询列表的函数
import router from '../router' // 导入 Vue Router 实例

const loading = ref(true) // 创建一个 ref 对象，默认为 true，代表正在加载中
const jobs = ref([]) // 创建一个 ref 对象，初始值为空数组

// 异步立即执行函数，获取咨询列表数据
;(async function () {
  try {
    loading.value = true // 加载状态设为 true
    const res = await consultingIndex() // 调用获取咨询列表的 API 函数
    jobs.value = res.map((item) => {
      // 对每个列表项进行处理
      if (item.image.includes('"')) {
        item.image =
          baseURL + item.image.split('"').filter((item) => item !== '"').join('')
      } else {
        item.image = baseURL + item.image
      }
      let date = new Date(item.date)
      item.date = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
      return item
    })
    loading.value = false // 加载完成后将加载状态设为 false
  } catch (error) {
    loading.value = false // 加载出错时将加载状态设为 false
  }
})()

// 处理点击事件的函数
async function handleClick(item) {
  if (item) {
    sessionStorage.setItem('ConsultationDetails', JSON.stringify(item)) // 将点击的咨询详情存储到会话存储中
    router.push('/ConsultationDetails') // 跳转到咨询详情页面
  } else {
    showToast(`暂无详情`) // 如果没有传入咨询项，显示提示消息“暂无详情”
  }
}

</script>

<style scoped lang="less">
@var1: #9f9fa0;

.style {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding-bottom: 2.5px;
	box-sizing: border-box;
	.title {
		font-weight: bold;
		font-size: 16px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow: hidden;
		-webkit-box-orient: vertical;
	}
}
.style :where(.num, .release_time) {
	color: @var1;
	font-size: 13.5px;
}

</style>
